import React, { useState } from 'react'
// import { BrowserRouter as Router, Route, Link  } from 'react-router-dom'
import Head from 'next/head'
import Link from 'next/link'
import Nav from '../components/nav'
import Header from '../components/Header.js'
import Author from '../components/Author.js'
import Advert from '../components/advert'
import Footer from '../components/Footer'
import axios from 'axios'

import { Button, Row, Col, List, Icon, Avatar } from 'antd'
import '../static/style/pages/index.css'
import Axios from 'axios'
import  servicePath  from '../config/apiUrl'
import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
const Home = (list) => {
  console.log(list)
  // https://raoenhui.github.io/nextjs/2018/08/31/Nextjs%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3/
  //  const [mylist,setMylist] = useState(  [
  //   {title:'React Hooks 免费视频教程(共11集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
  //   {title:'React Hooks 免费视频教程(共12集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
  //   {title:'React Hooks 免费视频教程(共13集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
  //   {title:'React Hooks 免费视频教程(共14集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
  // ])
  // 要把service项目链接数据库的接口项目启动前台和后台的工程页面刷新才能接口调用成功。才可以启动正常,但是blog属于服务端next.js渲染，相当于访问接口是通过服务没通过浏览器，而admin项目是d单纯的react页面渲染 通过浏览器访问接口和服务器端口不同所以要设置跨域操作
  const [mylist, setMylist] = useState(list.data)
  const renderer = new marked.Renderer();
  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    sanitize:false,
    xhtml: false,
    highlight: function (code) {
            return hljs.highlightAuto(code).value;
    }

  }); 
  return (
    <div>
      <Head>
        <title>Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {/* 头部 */}
      <Header />
      {/* 左侧栏 */}
      <Row className='comm-main' type='flex' justify='center'>
        <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}>
          <List header={<div>最新数据</div>} itemLayout="vertical" dataSource={mylist} renderItem={item => (<List.Item>

            <div className="list-title">
             <Link href={{pathname:"/detailed",query:{id:item.id}}}>
               <a>{item.title}</a>
             </Link>
            </div>
            <div className="list-icon">
              <span><Icon type="calendar" /> {item.addTime}</span>
              <span><Icon type="folder" /> {item.typeName}</span>
              <span><Icon type="fire" /> {item.view_count}人</span>
            </div>
            <div className="list-context" dangerouslySetInnerHTML={{__html:marked(item.introduce)}}></div>
          </List.Item>)}></List>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  )
}
Home.getInitialProps = async () => {
  const promise = new Promise((resolve) => {
    // 服务端
    // axios('http://127.0.0.1:7001/default/getArticleList').then((res) => {
    //   // console.log(res['data']['data'])
    //   resolve(res['data'])
    // })
      axios(servicePath.getArticleList).then((res) => {
      // console.log(res['data']['data'])
      resolve(res['data'])
    })
  })
  return await promise
}

export default Home
